import { useEffect, useState } from 'react';
import { Upload, Button, Table } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import * as XLSX from 'xlsx';

const FileUpload = () => {
  const [data, setData] = useState<any[]>([]); //Table引入的数据
  const [indexData, setIndexData] = useState<any[]>([]); //Table的rowSpan属性使用的二维数组
  const [titleArray, setTitleArray] = useState<any[]>([]); //Table的rowSpan属性使用的二维数组
  const [tableColumns, setTableColumns] = useState<any[]>([]); //Table的rowSpan属性使用的二维数组

  useEffect(() => {
    if(titleArray.length) {
      setTableColumns(columnsAdaptor(titleArray))
    }
  }, titleArray[0])

  const shareOnCell = (indexData, _index: number) => {
    const tempList = indexData[_index];
    return (_: any, index: number) => {
      return { rowSpan: tempList[index]}
    }
  }
  
  //配置官网类型的columns形式
    const columnsAdaptor = (titles: string | any[]) => {
      const columnsArr = [];
      const objTemp1 = {title: '', dataIndex: '', render: (text: any) => <a>{text}</a>, onCell: (_, index) => { return { rowSpan: 1}}};
      const objTemp2 = {title: '', dataIndex: '', render: (text: any) => <a>{text}</a>, onCell: (_, index) => { return { rowSpan: 1}}};
      for(let i = 0; i < titles.length; i++) { //依次补充columns数组
        const columnsObj = {title: '', dataIndex: '', render: (text: any) => <a>{text}</a>, onCell: (_, index) => { return { rowSpan: 1}}};
        columnsObj.title = titles[i];
        columnsObj.dataIndex = titles[i];
        if(i < 5) {
          columnsObj.onCell = shareOnCell(indexData, i);
        }
        if(i == 7 || i == 8) {
          columnsObj.onCell = shareOnCell(indexData, 1);
        }
        columnsArr.push(columnsObj);
      }

      //补充两个合计的内容
      objTemp1.title = titleArray[5] + '合计';
      objTemp1.dataIndex = titleArray[5];
      objTemp1.onCell = columnsArr[1].onCell;
      columnsArr.splice(6, 0, objTemp1);
  
      objTemp2.title = titleArray[6] + '合计';
      objTemp2.dataIndex = titleArray[6];
      objTemp2.onCell = columnsArr[1].onCell;
      columnsArr.splice(8, 0, objTemp2);
      
      return columnsArr;
    }
  
  // const columns = [
  //   {
  //     title: '标题3',
  //     dataIndex: '标题3',
  //     render: (text: any) => <a>{text}</a>,
  //     // onCell: sharedOnCell3,
  //     onCell: shareOnCell(indexData, 0),
  //   },
  //   {
  //     title: '标题4',
  //     dataIndex: '标题4',
  //     render: (text: any) => <a>{text}</a>,
  //     onCell: shareOnCell(indexData, 1),
  //   },
  //   {
  //     title: '标题5',
  //     dataIndex: '标题5',
  //     render: (text: any) => <a>{text}</a>,
  //     onCell: shareOnCell(indexData, 2),
  //   },
  //   {
  //     title: '标题6',
  //     dataIndex: '标题6',
  //     render: (text: any) => <a>{text}</a>,
  //     onCell: shareOnCell(indexData, 3),
  //   },
  //   {
  //     title: '标题7',
  //     dataIndex: '标题7',
  //     render: (text: any) => <a>{text}</a>,
  //   },
  //   {
  //     title: '数量1',
  //     dataIndex: '数量1',
  //     render: (text: any) => <a>{text}</a>,
  //   },
  //   {
  //     title: '数量1合计',
  //     dataIndex: '数量1',
  //     render: (text: any) => <a>{text}</a>,
  //     onCell: shareOnCell(indexData, 1),
  //   },
  //   {
  //     title: '数量6',
  //     dataIndex: '数量6',
  //     render: (text: any) => <a>{text}</a>,
  //   },
  //   {
  //     title: '数量6合计',
  //     dataIndex: '数量6',
  //     render: (text: any) => <a>{text}</a>,
  //     onCell: shareOnCell(indexData, 1),
  //   },
  //   {
  //     title: '数量10',
  //     dataIndex: '数量10',
  //     render: (text: any) => <a>{text}</a>,
  //     onCell: shareOnCell(indexData, 1),
  //   },
  //   {
  //     title: '数量11',
  //     dataIndex: '数量11',
  //     render: (text: any) => <a>{text}</a>,
  //     onCell: shareOnCell(indexData, 1),
  //   },
  // ]

  const indexList = (data) => {
    const indexDataTemp = []; //*因为用了hooks新增或改变的语句
    const keysData = Object.keys(data[0] || {});
    for (let i = 3; i < keysData.length; i++) {
      const innerIndex = new Array(data.length).fill(0);
      innerIndex[0] = 1;
      let temp = data[0][keysData[i]];
      let indexTemp = 0;
      for (let j = 1; j < data.length; j++) {
        if (data[j][keysData[i]] == temp) {
          innerIndex[indexTemp]++;
        } else {
          temp = data[j][keysData[i]];
          innerIndex[j] = 1;
          indexTemp = j;
        }
      }
      indexDataTemp.push(innerIndex); //*
    }
    setIndexData(indexDataTemp); //*
  }

  //Excel导入的数据变为Table引入的数据格式
  const dataAdaptor = (data) => {
    const result: any[] = [];
    const titleArr = data[1]; //标题数组
    for(let i = 2; i < data.length; i++) { //Excel引入的数组第一个元素为空，第二个为标题数组，第三个开始为每个row
      const tempObj = {};
      tempObj['key'] = i - 1; //增加key值
      for(let j = 0; j < titleArr.length; j++) {
        tempObj[titleArr[j]] = data[i][j]; //标题为键，每个row的对应数据为值
      }
      result.push(tempObj);
    }
    return result; //Table需要引入的data
  }

  const props={
    accept: ".xls,.xlsx,application/vnd.ms-excel",
    beforeUpload: (file: any) => {
        const reader = new FileReader();
        reader.onload = function (e) {
          const datas = e.target.result;
          const workbook = XLSX.read(datas, { //解析datas
              type: 'binary'
          });
          const first_worksheet = workbook.Sheets[workbook.SheetNames[0]];//工作簿中的工作表的有序列表
          const jsonArr = XLSX.utils.sheet_to_json(first_worksheet, { header: 1 });//将工作簿对象转换为JSON对象数组
          setData(dataAdaptor(jsonArr)); //设置data
          indexList(dataAdaptor(jsonArr)); //转化为indexData
          setTitleArray(jsonArr[1].splice(2));
        };
        reader.readAsBinaryString(file);
        return false; //不上传
    },
  };

  return (
    <div>
      <Upload {...props}>
        <Button icon={<UploadOutlined />}>Click to Upload</Button>
      </Upload>
      {indexData.length ? <Table columns={tableColumns} dataSource={data} bordered pagination={false} /> : []}
    </div>
  )
}

export default FileUpload;